<template>
  <div class="management-merchant views-container" v-loading = "loading">
    <choose-link ref="chooseLink" :config="chooseLinkConfig" :changeEvt="uploadFileChange"></choose-link>

    <div class="wlm-form">
                <div class="wlm-form-header">活动设置</div>
                <div class="wlm-form-content">
        <!-- ref="treasure" :model="formFormatData.formData" :rules="formFormatData.rules" -->
        <el-form
          size="small"
          label-width="160px"
          class="retail-form"
          label-position="right"
          :rules="formFormatData.rules"
          ref="treasure" :model="formFormatData.formData" 
        >
          <el-form-item label="专题名称" prop="special_name">
            <el-input
              v-model.trim="formFormatData.formData.special_name"
              style="width:50%;"
              placeholder="请输入专题名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="专题时间" prop="time">
            <el-date-picker
              :picker-options="pickerOptions"
              :disabled="$hasFormEdit"
              style="width:360px;"
              :default-time="[`${new Date().getHours()}:${(new Date().getMinutes() + 5).toString().padStart(2, '0')}:00`,'23:59:59']"
              v-model="formFormatData.formData.time"
              value-format="timestamp"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="活动主图">
            <choose-files
              ref="chooseFiles"
              :config="choosePlatformConfig"
              :changeEvt="formFormatFiltersChange"
            ></choose-files>
            <div class="form-help">注：建议尺寸750*530</div>
          </el-form-item>
          <el-form-item label="背景音乐">
            <choose-files
              ref="chooseFiles"
              :config="choosePlatmaginConfig"
              :changeEvt="formFormatFiltersChange"
            ></choose-files>
          </el-form-item>
          <el-form-item label="专题颜色">
            <el-color-picker v-model="formFormatData.formData.colour"></el-color-picker>
          </el-form-item>
          <el-form-item label="关联活动">
            <el-radio-group v-model="formFormatData.formData.relation_activities" @change="activebtn" :disabled="$hasFormEdit">
              <el-radio :label="1" v-if="patSetting.plugin.blessing.open">关联福袋</el-radio>
              <el-radio :label="2" v-if="patSetting.plugin.gift.open">关联礼包商品</el-radio>
              <el-radio :label="3">不关联活动</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="选择福袋"
            v-if="formFormatData.formData.relation_activities == 1"
          >
            <el-select
              v-model="formFormatData.formData.blessing_id"
              placeholder="请选择福袋"
              style="width:200px;"
              @change="blessingbtn"
              :disabled="$hasFormEdit"
            >
               <el-option v-for="item in getbless" :key="item.blessing_id" :label="item.title" :value="item.blessing_id" ></el-option>
            </el-select>
            <div class="form-help">选择福袋的活动时间必须在造结活动时间内</div>
          </el-form-item>
          <el-form-item
            label="选择礼包商品"
            v-if="formFormatData.formData.relation_activities == 2"
          >
            <el-select
              v-model="formFormatData.formData.goods_id"
              placeholder="请选择礼包商品"
              style="width:200px;"
               @change="goodsbtn"
               :disabled="$hasFormEdit"
            >
            <el-option v-for="item in giftGoods" :key="item.goods_id" :label="item.goods_name" :value="item.goods_id" ></el-option> 
            </el-select>
            <div class="form-help">注：一个礼包只能添加一个活动，请勿重复添加！</div>

          </el-form-item>
          <el-form-item label="导航链接" v-if="formFormatData.formData.relation_activities == 2">
              <div > 
                 <choose-files
                ref="chooseFilesImg"
                :config="chooseStoreImg"
                :changeEvt="formFormatFiltersChange"
              ></choose-files>
              <div class="form-help" style="margin-bottom: 10px;">建议尺寸120*120</div>
                <div>
                  文字
                  <el-input
                      type="text"
                       placeholder="请输入文字"
                     v-model="formFormatData.formData.navigation_text"
                      maxlength="4"
                      show-word-limit
                      style="width:150px;margin-bottom: 10px;"
                    >
                  </el-input>
                </div>
             
              
              <div class="nav-item-link flex-row flex-align-c">
                  <div class="nav-item-link-label">链接:</div>

                  <div class="readonly-div" @click="uploadTrigger('chooseUrl', 2)">
                    <div
                      class="readonly ivu-input-wrapper ivu-input-wrapper-default ivu-input-type"
                    >
                      <i
                        class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"
                      ></i>
                      <input
                        autocomplete="off"
                        :value="formFormatData.formData.linkurl"
                        spellcheck="false"
                        type="text"
                        placeholder="请选择链接"
                        readonly="readonly"
                        class="ivu-input ivu-input-default"
                      />
                    </div>
                    <i class="icon icon-fujian readonly-icon" style="left: 12px;margin-top:-3px;"></i>
                  </div>
                </div>
            </div>

          </el-form-item>




          <el-form-item label="合作商家">
                <el-select  multiple  filterable  v-model="formFormatData.formData.business" placeholder="请选择合作商家" @change="businbtn" >
                <el-option v-for="item in shopData" :disabled="item.storenum==0" :key="item.value" :label="item.name" :value="item.id"></el-option>
              </el-select>
               <el-select  multiple  filterable  v-model="formFormatData.formData.store_id" placeholder="请选择门店" style="margin-left:30px;">
                   <el-option v-for="item in storeData" :disabled="item.storenum==0" :key="item.id" :label="item.name" :value="item.id"></el-option>
               </el-select>
          </el-form-item>
           <el-form-item label="关联直播">
            <el-radio-group v-model="formFormatData.formData.is_live">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="选择直播"
            v-if="formFormatData.formData.is_live == 1"
          >
            <el-select
              v-model="formFormatData.formData.live_id"
              placeholder="请选择直播"
              style="width:200px;"
            >
             <el-option v-for="item in getFestiva" :key="item.room_id" :label="item.name" :value="item.room_id" ></el-option> 
            </el-select>
          </el-form-item>
          <el-form-item
            label="直播进行中广告图"
            v-if="formFormatData.formData.is_live == 1"
          >
            <choose-files
              ref="chooseFiles"
              :config="choosePlatwechatConfig"
              :changeEvt="formFormatFiltersChange"
            ></choose-files>
            <div class="form-help">注：建议尺寸690*200</div>
          </el-form-item>
          <el-form-item
            label="直播预告广告图"
            v-if="formFormatData.formData.is_live == 1"
          >
            <choose-files
              ref="chooseFiles"
              :config="chooseyugaoConfig"
              :changeEvt="formFormatFiltersChange"
            ></choose-files>
            <div class="form-help">注：建议尺寸690*200</div>
          </el-form-item>
          <el-form-item label="选择社群">
            <el-select
              v-model="formFormatData.formData.community[0]"
              placeholder="请选择社群"
              style="width:200px;"
            >
              <el-option
                v-for="(item,index) in selectValue"
                :key="index"
                :label="item.title"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="小程序分享图">
              <choose-files
              ref="chooseFiles"
              :config="choosexcxtuConfig"
              :changeEvt="formFormatFiltersChange"
            ></choose-files>
              <div class="form-help">建议尺寸：500*400</div>
          </el-form-item>
          <el-form-item label="公众号分享图">
               <choose-files
              ref="chooseFiles"
              :config="choosegzhtuConfig"
              :changeEvt="formFormatFiltersChange"
            ></choose-files>
            <div class="form-help">建议尺寸：100*100</div>
          </el-form-item>
          <el-form-item label="分享标题">
            <el-input v-model="formFormatData.formData.share_title" style="width:50%;" placeholder="请输入分享标题"></el-input>
          </el-form-item>
          <el-form-item label="分享描述">
             <el-input v-model="formFormatData.formData.share_description" style="width:50%;" placeholder="请输入分享描述"></el-input>
          </el-form-item>
          <el-form-item label="是否开启虚拟浏览量" >
                            <el-radio-group v-model="formFormatData.formData.is_virtual_views" @change="virtualbtn">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="2">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                         <el-form-item label="随机增加虚拟浏览量"  v-if="formFormatData.formData.is_virtual_views==1">
                            <el-input  v-model.trim="formFormatData.formData.random_add_views" style="width:50%;">
                            </el-input>
                            <div class="form-help">格式1|10(随机最小值|随机最大值)，0为不设置随机浏览量</div>
                        </el-form-item>
                         <el-form-item label="虚拟基础浏览量" v-if="formFormatData.formData.is_virtual_views==1">
                            <el-input-number  v-model.trim="formFormatData.formData.virtual_views" :controls="false">
                            </el-input-number>
                        </el-form-item>
                         <el-form-item label="是否开启虚拟求助量" >
                            <el-radio-group v-model="formFormatData.formData.is_virtual_seek" @change="virtualseekbtn">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="2">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                         <el-form-item label="随机增加虚拟转发量" v-if="formFormatData.formData.is_virtual_seek==1">
                            <el-input  v-model.trim="formFormatData.formData.random_add_seek" style="width:50%;">
                            </el-input>
                            <div class="form-help">格式1|10随机最小值|随机最大值，0为不设置浏览量</div>
                        </el-form-item>
                         <el-form-item label="虚拟基础转发量" v-if="formFormatData.formData.is_virtual_seek==1">
                            <el-input-number  v-model.trim="formFormatData.formData.virtual_seek" :controls="false">
                            </el-input-number>
                        </el-form-item>
                         <el-form-item label="虚拟人数"  >
                              <el-input-number  v-model.trim="formFormatData.formData.virtual_number" :min="0" :controls="false">
                            </el-input-number>
                        </el-form-item>
          <el-form-item label="专题规则">
            <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入专题规则"
                v-model="formFormatData.formData.rule" style="width:50%;">
              </el-input>
          </el-form-item>
          <el-form-item label="活动内容">
               <ueditor
                                v-if="isFirst"
                                :ueditorChange="shopInfoChange"
                                :ueditorList="ueditorList"
                                :bindIndex="1"
                                :defaultMsg='defaultMsg1'
                                :config='{initialFrameWidth: null,initialFrameHeight: 350}'
                                ref="by_know"></ueditor>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div
      v-cloak
      class="wlm-fixed-btn flex-row flex-align-c flex-justify-c"
    >
      <!-- @click="saveForm" :loading="butt"-->
      <el-button
        size="small"
        @click="saveForm"
        type="primary"
        :loading="butt"
      >保存</el-button>
      <router-link
        tag="span"
        to="/application/themeconstruction"
      >
        <el-button size="small">返回</el-button>
      </router-link>
    </div>
  </div>
</template>
<script>
import { servicesList,businessIndex } from "@/api/merchant";
import { editThemeFestival,getThemeFestivalData,getGiftGoods,getblessing,getFestivalLive,getFestivalStore} from "@/api/application";
import ChooseGoods from "@/components/ChooseGoods/index";
import ChooseFiles from "@/components/ChooseFiles/index";
import ChooseLink from "@/components/ChooseLink/index";
 import ueditor from '@/components/Ueditor/index'
import mixins from "@/mixins/mixins";
import power from '@/mixins/power'
export default {
  mixins: [mixins.getters("Form"),power],
  components: {
    ChooseGoods,
    ChooseFiles,
    ChooseLink,
    ueditor
  },
  created() {
    this.$nextTick(() => {
      this.communitybtn();
      this.getGiftGoodsbtn()
      this.getblessingbtn()
      this.getFestivalLivebtn()
      this.shopDataGet()
      if(this.$route.query.theme_festival_id){
        this.getThemeFestivalDatabtn()
        this.getFestivalStorebtn()
        console.log("9999999999999999")
      }
      setTimeout(() => {
        this.isFirst = true
      }, 500)
    });
  },

  computed:{
    // $theme_festival_id(){
    //   return this.$route.query.theme_festival_id?true:false
    // },
    $hasFormEdit(){
      //活动未开始并且新增的时候可以修改时间，其他时候不能修改
      return this.$route.query.status!=1 && this.$route.query.status?true : false
    }
  },
  mounted () {
      //  console.log("0000ggggg",this.shopData)
  },
  watch: {
      'formFormatData.formData.business':{
            handler(newData, oldData){
                getFestivalStore({bus_id:newData}).then(res=>{
                  this.storeData = res.data.data
                
                  console.log("111111",this.storeData)
                })
            },
            immediate: true,
        deep: false
      },
  },
  data() {
    return {
      isFirst:false,
       ueditorList: [],
          linkurl:'',
       defaultMsg1: '',
      butt:false,
      loading:false,
      selectValue: [],
      getFestiva:[],
      busdata:[],
      giftGoods:"",
      getbless:"",
      shopData:[],
      storeData:[],
      //禁止选择过去时间
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      chooseLinkConfig: {
        type: ["chooseLink"],
        initList: [],
        link_type: "1",
      },
      chooseStoreImg: {
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 1,
          isMore: false,
          model: "display",
        },
        initList: [],
        isShowList: true,
        file_type: "image",
        bindKey: {
          key: "navigation_icon",
          model: "img",
        },
      },
      choosePlatformConfig: {
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: "display"
        },
        initList: [],
        isShowList: true,
        file_type: "image",
        bindKey: {
          key: "activity_map_id",
          model: "img"
        }
      },
      //背景音乐
      choosePlatmaginConfig: {
        type: ["audio"],
        model: "display",
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: "display"
        },
        initList: [],
        isShowList: true,
        file_type: "audio",
        bindKey: {
          key: "music_id",
          model: "img"
        }
      },
      choosePlatwechatConfig: {
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: "display"
        },
        initList: [],
        isShowList: true,
        file_type: "image",
        bindKey: {
          key: "live_img",
          model: "img"
        }
      },
      chooseyugaoConfig: {
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: "display"
        },
        initList: [],
        isShowList: true,
        file_type: "image",
        bindKey: {
          key: "live_notice_img",
          model: "img"
        }
      },
      //小程序分享图
      choosexcxtuConfig:{
        type: ['image'],
                model: 'display',
                uploadConfig: {
                limit: 1,
                isMore: true,
                model: 'display'
                },
                isUnique: true,
                initList: [],
                isShowList: true,
                file_type: 'image',
                bindKey: {
                key: 'saapp_img',
                model: 'img'
                }
      },
      //公众号分享图
      choosegzhtuConfig:{
        type: ['image'],
                model: 'display',
                uploadConfig: {
                limit: 1,
                isMore: true,
                model: 'display'
                },
                isUnique: true,
                initList: [],
                isShowList: true,
                file_type: 'image',
                bindKey: {
                key: 'wechat_img',
                model: 'img'
                }
      },
      formFormatData: {
        key: ["basicset"],
        api: {
          editForm: {
            api: getThemeFestivalData,
            params: {
              theme_festival_id: ""
            },
            redirect: "theme_festival_id",
            filters: {
              img: {
                bindInit: [
                  "choosePlatformConfig",
                  "choosePlatmaginConfig",
                  "choosePlatwechatConfig",
                  "chooseyugaoConfig",
                  "choosexcxtuConfig",
                  "choosegzhtuConfig",
                  'chooseStoreImg'
                ]
              },
              choose: {
                // bindInit: ['chooseGoodsConfig']
              }
            }
          }
          //   submitForm:praiseSave
        },
        formData: {
          navigation_text:'',
          navigation_icon: [],
          business:[],
          store_id:[],
          special_name: "",
          time: [],
          activity_map_id: [],
          music_id: [],
          community:[],
          colour: "#D22121",
          relation_activities: 3,
          blessing_id: "",
          goods_id: "",
          is_live: 2,
          live_id: "",
          live_img: [],
          live_notice_img: [],
          wechat_img:[],
          saapp_img:[],
          share_title:'',
          share_description:'',
          is_virtual_views:2,
          random_add_views:0,
          virtual_views:'',
          is_virtual_seek:2,
          random_add_seek:0,
          virtual_seek:'',
          virtual_number:'',
          rule:'',
          content:'',
        },
         rules: {
          special_name: [{
            message: '请输入专题名称',
            required: true,
            trigger: 'change'
          }],
          time:[{
             message: '请选择时间',
            required: true,
            trigger: 'change'
          }]
         }
      }
    };
  },
  methods: {
        uploadFileChange(files) {
          const { key } = files;
          const {
          currentRow: [file_path],
          displayData: [{ name, title, path, app_id, type }],
        } = files;
        if (file_path || path) {
         this.formFormatData.formData.linkurl= file_path;
          this.$forceUpdate();
        } else {
          this.$message.error("请选择链接~!");
        }
        },
    uploadTrigger(evt, index) {
       if (evt === "chooseUrl") {
        this.$refs.chooseLink.toggle();
      }
    },
    virtualbtn(val){
      if(val==2){
        this.formFormatData.formData.random_add_views=0
      }
    },
    virtualseekbtn(val){
      if(val==2){
      this.formFormatData.formData.random_add_seek = 0
      }
    },
    shopInfoChange(msg) {
            this.defaultMsg1 = msg
            },
             formFormatCallBack(data, type, response) {
                if (type === 'editForm') {
                    const { content } = data
                    this.defaultMsg1 = content
                }
            },
    getThemeFestivalDatabtn(){
        return new Promise((resolve, reject) => {
              this.loading = true
              this.butt = true
          getThemeFestivalData({theme_festival_id:this.$route.query.theme_festival_id}).then(res=>{
           if(res.data.code==1){
             resolve(res)
              this.formFormatData.formData.navigation_icon = res.data.data.navigation_icon
              this.chooseStoreImg.initList = res.data.data.navigation_icon
              this.formFormatData.formData = res.data.data
              this.formFormatData.formData.activity_map_id = res.data.data.activity_map_id
              this.formFormatData.formData.music_id = res.data.data.music_id
              this.formFormatData.formData.saapp_img = res.data.data.saapp_img
              this.formFormatData.formData.wechat_img = res.data.data.wechat_img
              this.formFormatData.formData.live_img = res.data.data.live_img
              this.formFormatData.formData.live_notice_img = res.data.data.live_notice_img
              this.formFormatData.formData.business = res.data.data.business

               this.defaultMsg1=res.data.data.content
              this.loading = false
              this.butt = false
           }
          }) 
        })
    },
    //点击切换关联活动时，置空数据
    activebtn(type){
      this.formFormatData.formData.blessing_id = ""
         this.formFormatData.formData.goods_id = ""
        this.formFormatData.formData.business = []
     this.formFormatData.formData.store_id=[]
     this.formFormatData.formData.linkurl=''
    },
    //请求社群接口
    communitybtn() {
      servicesList({ list_rows: "all" }).then(res => {
        this.selectValue = res.data.data;
      });
    },
    //获取礼包商品接口
    getGiftGoodsbtn(){
      getGiftGoods().then(res=>{
        this.giftGoods = res.data.data
      })
    },
    //获取福袋接口
    getblessingbtn(){
      getblessing().then(res=>{
        this.getbless = res.data.data
      })
    },
    //选择关联福袋后重新绑定合作商家
    blessingbtn(type){
      this.formFormatData.formData.business=[]
      this.getbless.map((item,index)=>{
        this.formFormatData.formData.business=item.bus_id
      })
    },
    //选择关联礼包后重新绑定合作商家
    goodsbtn(type){
       this.formFormatData.formData.business=[]
       this.giftGoods.map(item=>{
        //  礼包商品的的id等于合作商家的goods_id就重新赋值
            if(item.goods_id === type){
                this.formFormatData.formData.business= item.bus_id
                this.formFormatData.formData.store_id=  item.store_ids
            
            }
       })
   
    },
    //选择直播
    getFestivalLivebtn(){
      getFestivalLive().then(res=>{
        this.getFestiva = res.data.data
      })
    },
    //请求门店数据
    getFestivalStorebtn(){
      // getFestivalStore().then(res=>{
      //   this.storeData = res.data.data
      // })
    },
    businbtn(type){
      let store_data=[]
         getFestivalStore({bus_id:type}).then(res=>{
        this.storeData = res.data.data
        store_data=this.storeData.map(item=>item.id)
          this.formFormatData.formData.store_id = store_data.filter(ain=>{
            return this.formFormatData.formData.store_id.indexOf(ain) !==-1
          })
      })
    },
    shopDataGet() {
      businessIndex({ list_rows: 'all' }).then((response) => {
        const { data: { data: msgData = [] } } = response
        this.shopData = msgData
      })
    },
    //保存
    saveForm() {
      //
      this.formFormatData.formData.content = this.defaultMsg1
      this.butt = true
      if(this.$route.query.theme_festival_id){
        editThemeFestival(this.formFormatData.formData,this.$route.query.theme_festival_id).then(res=>{
          if(res.data.code==1){
            this.butt =false
             this.$message.success("编辑成功")
             this.$router.push('/application/themeconstruction')
          }
        }).finally(()=>{
                         this.butt= false
                    })
      }else{
        //新增保存时，验证是否必填
        editThemeFestival(this.formFormatData.formData).then(res=>{
          if(res.data.code==1){
            this.butt= false
             this.$message.success("保存成功")
             this.$router.push('/application/themeconstruction')
          }
        }).finally(()=>{
                         this.butt= false
                    })
      }
    }
  }
};
</script>
<style lang="scss" scoped>

.form-help {
    color: #999;
    line-height: 14px;
    margin-top: 10px;
    font-size: 12px;
    font-weight: normal;
  }
  .ivu-input-wrapper {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  line-height: normal;
  width: 100%;

  input {
    background: #e8effc;
    border: 0;
    width: 300px;
    height: 28px;
    border-radius: 3px;
    padding-left: 18px;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}
</style>
